<script setup lang="ts">
  import TableLayout from '@/layout/table-layout.vue';
  import { usePageTable } from '@/hooks/arco/usePageTable';
  import { queryBranchRoomList } from '@/api/organization/room';
  import useModeModalHandler from '@/hooks/arco/useModeModalHandler';
  import { useSelectOption } from '@/hooks/arco/useSelectOption';
  import { queryList } from '@/api/organization/nursing-home';
  import { queryBranchBuildingList } from '@/api/organization/building';
  import Detail from './detail.vue';

  const columns = [
    {
      title: '房间ID',
      dataIndex: 'roomId',
    },
    {
      title: '所在院区',
      dataIndex: 'branchName',
    },
    {
      title: '所在建筑',
      dataIndex: 'buildingName',
    },
    {
      title: '房间号',
      dataIndex: 'roomNo',
    },
    {
      title: '房间状态',
      dataIndex: 'statusLabel',
    },
    {
      title: '房间类型',
      dataIndex: 'roomTypeLabel',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      align: 'center' as const,
      dataIndex: 'action',
      slotName: 'action',
    },
  ];

  const page = usePageTable({
    searchForm: {
      state: {
        branchId: '',
        buildingId: '',
        roomType: '',
        roomNo: '',
        status: '',
      },
    },
    table: {
      apiFun: queryBranchRoomList,
      columns,
    },
  });

  const detailDrawer = useModeModalHandler({
    onSuccess() {
      page.reload();
    },
  });

  const buildingSelectOptions = useSelectOption({
    name: '所在建筑',
    apiFun: (branchId?: string) => {
      if (branchId) {
        return queryBranchBuildingList(branchId);
      }
      return Promise.resolve([]);
    },
    immediate: false,
    fieldNames: {
      value: 'buildingId',
      label: 'name',
    },
  });

  const branchSelectOptions = useSelectOption({
    name: '所在院区',
    apiFun: queryList,
    fieldNames: {
      value: 'id',
      label: 'name',
    },
    onChange(e) {
      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
      page.bindProps.searchForm!.state.buildingId = '';
      buildingSelectOptions.executeQuery(e);
    },
  });
</script>

<template>
  <div class="col">
    <Detail v-bind="detailDrawer.bindProps" />
    <TableLayout v-bind="page.bindProps" @create="detailDrawer.showAdd()">
      <template #searchForm="{ state }">
        <a-form-item field="branchId" label="所在院区" label-col-flex="60px">
          <a-select
            v-model="state.branchId"
            allow-clear
            v-bind="branchSelectOptions.bindProps"
          />
        </a-form-item>

        <a-form-item field="buildingId" label="所在建筑" label-col-flex="60px">
          <a-select
            v-model="state.buildingId"
            allow-clear
            v-bind="buildingSelectOptions.bindProps"
          />
        </a-form-item>

        <a-form-item field="roomNo" label="房间号" label-col-flex="60px">
          <a-input
            v-model="state.roomNo"
            placeholder="请输入房间号"
            allow-clear
          />
        </a-form-item>

        <a-form-item field="roomType" label="房间类型" label-col-flex="60px">
          <dict-select
            v-model="state.roomType"
            allow-clear
            type="InstitutionRoomType"
            placeholder="请选择房间类型"
          />
        </a-form-item>

        <a-form-item field="status" label="房间状态" label-col-flex="60px">
          <dict-select
            v-model="state.status"
            allow-clear
            type="InstitutionBranchRoomStatus"
            placeholder="请选择房间状态"
          />
        </a-form-item>
      </template>

      <template #action="{ record }">
        <ae-button
          purpose="view"
          v-bind="detailDrawer.openBtn('detail', record)"
        >
          查看
        </ae-button>
      </template>
    </TableLayout>
  </div>
</template>

<style lang="less" scoped></style>
